<template>
	<view class="page">
		<view class="bodys">
			<view class="text">
				银行卡账户 ({{bank_list.length}}张)
			</view>
			<view class="yh" v-for="(item,index) in bank_list" :key="item.index"
				:style="item.bank_type == 3?'background-color: #eb6668;':item.bank_type == 2?'background-color:#2198C8;':'background-color:#14BB60;'">
				<view class="justify-content-sp">
					<view class="yh_left">
						{{item.bank_type==3?'银行账户':item.bank_type==2?'支付宝账户':'微信账户 (暂不支持)'}}
					</view>
					<view class="yh_right" @click="toPath(item.bank_type,item.bank_id)">
						<image src="../../static/account/bianji.png" mode="" class="image"></image>
					</view>
				</view>
				<view class="yh_cont justify-content-start" v-if="item.bank_type== 2||item.bank_type == 3">
					<view class="">
						姓名 ：
					</view>
					<view class="">
						{{item.true_name}}
					</view>
				</view>
				<view class="yh_cont justify-content-start" v-if="item.bank_type == 3">
					<view class="">
						所属银行 ：
					</view>
					<view class="">
						{{item.bank_name}}
					</view>
				</view>
				<view class="yh_cont justify-content-start" v-if="item.bank_type== 2||item.bank_type == 3">
					<view class="">
						{{item.bank_type==3?'银行账号':'支付宝账号'}} ：
					</view>
					<view class="yh_cont_right">
						{{item.bank_no}}
					</view>
				</view>
			</view>
			<view class="text bg_color" @click="addBank(3)">
				+添加银行卡
			</view>
			<view class="text">
				支付宝账户 ({{alipay_list.length}}张)
			</view>
			<view class="yh" v-for="(item,index) in alipay_list" :key="item.index"
				:style="item.bank_type == 3?'background-color: #eb6668;':item.bank_type == 2?'background-color:#2198C8;':'background-color:#14BB60;'">
				<view class="justify-content-sp">
					<view class="yh_left">
						{{item.bank_type==3?'银行账户':item.bank_type==2?'支付宝账户':'微信账户 (暂不支持)'}}
					</view>
					<view class="yh_right" @click="toPath(item.bank_type,item.bank_id)">
						<image src="../../static/account/bianji.png" mode="" class="image"></image>
					</view>
				</view>
				<view class="yh_cont justify-content-start" v-if="item.bank_type== 2||item.bank_type == 3">
					<view class="">
						姓名 ：
					</view>
					<view class="">
						{{item.true_name}}
					</view>
				</view>
				<view class="yh_cont justify-content-start" v-if="item.bank_type == 3">
					<view class="">
						所属银行 ：
					</view>
					<view class="">
						{{item.bank_name}}
					</view>
				</view>
				<view class="yh_cont justify-content-start" v-if="item.bank_type== 2||item.bank_type == 3">
					<view class="">
						{{item.bank_type==3?'银行账号':'支付宝账号'}} ：
					</view>
					<view class="yh_cont_right">
						{{item.bank_no}}
					</view>
				</view>
			</view>
			<view class="text bg_color" @click="addBank(2)">
				+添加支付宝
			</view>
			<view class="text">
				微信账户 ({{wechat_list.length}}张)
			</view>
			<view class="yh" v-for="(item,index) in dataList" :key="item.index"
				:style="item.bank_type == 3?'background-color: #eb6668;':item.bank_type == 2?'background-color:#2198C8;':'background-color:#14BB60;'">
				<view class="justify-content-sp">
					<view class="yh_left">
						{{item.bank_type==3?'银行账户':item.bank_type==2?'支付宝账户':'微信账户 (暂不支持)'}}
					</view>
					<view class="yh_right" @click="toPath(item.bank_type,item.bank_id)">
						<image src="../../static/account/bianji.png" mode="" class="image"></image>
					</view>
				</view>
				<view class="yh_cont justify-content-start" v-if="item.bank_type== 2||item.bank_type == 3">
					<view class="">
						姓名 ：
					</view>
					<view class="">
						{{item.true_name}}
					</view>
				</view>
				<view class="yh_cont justify-content-start" v-if="item.bank_type == 3">
					<view class="">
						所属银行 ：
					</view>
					<view class="">
						{{item.bank_name}}
					</view>
				</view>
				<view class="yh_cont justify-content-start" v-if="item.bank_type== 2||item.bank_type == 3">
					<view class="">
						{{item.bank_type==3?'银行账号':'支付宝账号'}} ：
					</view>
					<view class="yh_cont_right">
						{{item.bank_no}}
					</view>
				</view>
			</view>
			<view class="text bg_color" @click="addBank(1)">
				+添加微信
			</view>
			<!-- 	<view class="btn_css">
				<view class="btn" @click="open_addBank">
					添加账户
				</view>
			</view> -->
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="popup_css">
				<view class="">
					<radio-group @change="radioChange">
						<label class="justify-content-start " v-for="(item, index) in items" :key="item.value"
							style="padding: 10rpx;">
							<view>
								<radio :value="item.value" :checked="index === current" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="btn btn_cs" @click="addBank">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getBanklist,
		getBankName
	} from '../../api/account/index.js'
	export default {
		data() {
			return {
				isEnroll: 1,
				dataList: [],
				items: [{
						value: '2',
						name: '支付宝',
						checked: 'true'
					},
					{
						value: '3',
						name: '银行卡'
					},
					{
						value: '1',
						name: '微信'
					}
				],
				current: 0,
				bankList: [],
				bank_list: [],
				alipay_list: [],
				wechat_list: []
			}
		},
		onLoad() {},
		onShow() {
			this.init();
			this.getBankList()
		},
		methods: {
			// 获取银行列表
			getBankList() {
				getBankName().then(res => {
					this.bankList = res.data
				})
			},
			// 跳转添加账号
			addBank(e) {
				this.isEnroll = 2;
				uni.navigateTo({
					url: '/pages/bank/index?type=' + e + '&isEnroll=' + this.isEnroll
				})
			},
			// 选择账户类型
			radioChange: function(evt) {
				this.current = evt.detail.value
			},
			// 打开添加账号弹窗
			open_addBank() {
				this.$refs.popup.open('bottom')
			},
			// 获取账户列表
			init() {
				getBanklist().then(res => {
					for (var i = 0; i < res.data.bank.length; i++) {
						res.data.bank[i].bank_no = res.data.bank[i].bank_no.slice(0, 4) + ' **** **** ' + res.data
							.bank[
								i]
							.bank_no.slice(
								12)
					}
					this.bank_list = res.data.bank;
					for (var i = 0; i < res.data.alipay.length; i++) {
						res.data.alipay[i].bank_no = res.data.alipay[i].bank_no.slice(0, 3) + ' **** ' + res.data
							.alipay[i]
							.bank_no.slice(
								7)
					}
					this.alipay_list = res.data.alipay;
					for (var i = 0; i < res.data.wechat.length; i++) {
						res.data.wechat[i].bank_no = res.data.wechat[i].bank_no.slice(0, 3) + ' **** ' + res.data
							.wechat[i]
							.bank_no.slice(
								7)
					}
					this.wechat_list = res.data.wechat;
				})
			},
			// 跳转页面
			toPath(a, b) {
				if (a == 1) {
					return;
				}
				uni.navigateTo({
					url: '/pages/bank/index?type=' + a + '&isEnroll=' + this
						.isEnroll + '&bank_id=' + b
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;

		.bodys {
			.text {
				margin: 0 30rpx;
				padding-top: 30rpx;
			}

			.bg_color {
				background-color: #494747;
				color: white;
				padding: 30rpx 50rpx;
				border-radius: 15rpx;
			}

			.yh {
				margin: 30rpx 30rpx 0 30rpx;
				padding: 30rpx;
				color: white;
				border-radius: 15rpx;

				.yh_left {
					font-weight: 550;
					font-size: 18px;
				}

				.yh_right {
					width: 14px;
					height: 14px;


					.image {
						width: 100%;
						height: 100%;
					}
				}

				.yh_cont {
					line-height: 20px;
					padding: 10rpx 0;

					.yh_cont_right {
						font-size: 25px;
					}

				}
			}
		}

		.btn_css {
			margin-top: 50px;
		}

		.popup_css {
			background-color: white;
			border-radius: 30rpx 30rpx 0 0;
			padding: 30rpx;
			height: 300rpx;

			.btn_cs {
				position: fixed;
				bottom: 10px;
				text-align: center;
				width: 630rpx;
			}
		}
	}
</style>